<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="拆零分拨" left-arrow @click-left="$router.go(-1)"></van-nav-bar>




		<div class="goodsFromWarp">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">原容器号：</div>
						</div>

						<van-field
							 class="skuInput"
							 v-model="editForm.jhrqid"
							 placeholder="请填写原容器号"
               @keyup="onEnter($event,do_inputjhrqid)"
						 />

             <div class="searchBtn">
                <button :disabled="isdisabled"  @click.stop="_getjhrqList()" >
                  <van-icon name="ellipsis" color="#1989fa"  />
                </button>
            </div>
				</div>
		</div>

				<div class="goodsFromWarp" >
						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">门店：</div>
								</div>


								<div class="skuNoInput">
									{{skuData[index].storename}}
								</div>


								<div class="searchBtn">
									<button :disabled="isdisabled"  @click.stop="_getSku()" >
										<van-icon name="ellipsis" color="#1989fa"  />
									</button>
								</div>
						</div>


						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">商品：</div>
								</div>
								<div class="skuNoInput">
								{{skuData[index].subsname}}
								</div>
						</div>

						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">商品编码：</div>
								</div>
								<div class="skuNoInput">
									{{skuData[index].itemid}}
								</div>
						</div>


						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">任务号：</div>
								</div>
								<div class="skuNoInput">
									{{skuData[index].renwuid}}
								</div>
						</div>


						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">分拨位置：</div>
								</div>
								<div class="skuNoInput">
									{{skuData[index].fbq_cwno}}
								</div>
						</div>


						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">拣货容器：</div>
								</div>
								<div class="skuNoInput">
									{{skuData[index].jhrq}}
								</div>
						</div>



            <div class="goodsInputWarp">
              <div class="goodsInputLabel">
                <div class="goodsInputBorder"></div>
                <div class="skuName">箱装：</div>
              </div>

              <div class="skuNoInput">
                  {{skuData[index].unit}}
              </div>

              <div class="goodsInputLabel">
                <div class="skuName">箱数：</div>
              </div>

              <van-field
                v-if="addmode"
                class="skuInput"
                v-model="skuData[index].pack"
                placeholder="请输入箱数"
              />

              <div class="skuNoInput" v-if="!addmode">
                {{skuData[index].pack}}
              </div>
            </div>


            <div class="goodsInputWarp">
              <div class="goodsInputLabel">
                <div class="goodsInputBorder"></div>
                <div class="skuName">分拨数量：</div>
              </div>

              <div class="skuNoInput">
                  {{skuData[index].jh_totqty}}
              </div>

              <div class="goodsInputLabel">
                <div class="skuName">散数：</div>
              </div>

              <van-field
                v-if="addmode"
                class="skuInput"
                v-model="skuData[index].qty"
                placeholder="请输入散数"
              />

              <div class="skuNoInput" v-if="!addmode">
                {{skuData[index].qty}}
              </div>
            </div>


            <div class="message">
              <div class="messageTitle" >预计分拨：</div>
              <div class="messageCon">{{skuData[index].yj_totqty}} </div>
            </div>




						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">目标容器：</div>
								</div>

								<van-field
                   clearable
									 class="skuInput"
									 v-model="editForm.mb_rqh"
									 placeholder="请填写目标容器"
								 />
						</div>

            <item-scan-input
              v-if="!addmode"
              :item-id="skuData[index].itemid"
              :operator-id="ryuser.operatorid"
              :kq-id="ryuser.kqid"
              @item-scanned="onItemScanned"
              ref="scanInput"
            />




						<div class="xiayige">
							<div @click="shangClick()">上一个</div>
							<div style="margin-left: 20px;" @click="xiaClick()">下一个</div>

              <div class="fenbochaxun">
                <button @click="fenbochaxun()">分拨查询</button>
              </div>
						</div>




				</div>








		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="lingquBtn()">领取任务</van-button>
			<van-button type="info" :disabled="!canSubmit" @click="saveGoodsBtn()">确认</van-button>
		</div>

    <div class="skuBtn">
			<van-button type="info" v-if="!addmode" :disabled="isdisabled" @click="editBtnClick()">修改</van-button>
			<van-button type="info" v-if="addmode" :disabled="!isdisabled" @click="saveBtnClick()">保存</van-button>
		</div>


    <table-popup
			v-model="jhrqVisible"
			title="容器列表"
			:table-data="jhrqList"
			:columns="jhrqColumns"
			@select="selectJhrqClick"
		/>



		<table-popup
			v-model="isSkuVisible"
			title="商品列表"
			:table-data="skuData"
			:columns="skuColumns"
			@select="selectSkuClick"
		/>


	</div>
</template>

<script>
import ItemScanInput from '@/components/ItemScanInput.vue'
import TablePopup from '@/components/TablePopup.vue'
export default {
  name: 'chailinfenbo',
  data() {
    return {
			editForm:{
				jhrqid:'',  ////D00000002  D00000001  D20250226
				mb_rqh:'',  //M20250353
				jhrq:'',
				pack:'',
				qty:'',
				unit:'',
				itemid:'',
				subid:'',
				renwuid:'',
				bill:'',
				jh_totqty:'',
				pswhsid:'',
				cwno:'',
			},
			isdisabled:false,
			lingquData:[],
			isLingQuVisible:false,
			skuData:[
				{
					storename:'',
          storename:'',
          subsname:'',
          itemid:'',
          renwuid:'',
          jhrq:'',
          ck_storeid:'',
          pack:'',
          qty:'',
          unit:'',
          barcode:'',
          jh_totqty:'',
				}
			],
			isSkuVisible:false,
			index:0,
      addmode:false,
      canSubmit:false,
      jhrqVisible:false,
      jhrqList:[],
      jhrqColumns:[
        {prop:'jhrq',label:'容器号',width:'100'},
				{ prop: 'sp', label: '商品', width: '150' },
				{ prop: 'tot', label: '总数量', width: '150' },
				{ prop: 'tpack', label: '箱数', width: '120' },
				{ prop: 'tqty', label: '散数', width: '120' }
      ],
      skuColumns: [
        { prop: 'subsname', label: '商品名称', width: '200' },
        { prop: 'barcode', label: '条码', width: '150' },
        { prop: 'itemid', label: '商品编码', width: '120' },
        { prop: 'unit', label: '箱装', width: '80' },
        { prop: 'pack', label: '箱数', width: '80' },
        { prop: 'jh_totqty', label: '总数量', width: '100' },
        { prop: 'yj_totqty', label: '预计分播', width: '100' }
      ]
		};
  },
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
    do_inputjhrqid(code){
      this.editForm.jhrqid = code
      this.lingquBtn()
    },
    onItemScanned(){
     	// 商品扫描成功后的处理
			this.canSubmit = true
    },
		shangClick(){
			if(this.index == 0){
				alert('最前一条')
			}else{
				this.index --
			}
		},
		xiaClick(){
			if(this.index ==  this.skuData.length-1){
				alert('最后一条')
			}else{
				this.index ++
			}
		},
		_getSku(){
			if(this.skuData[0].storename>''){
				this.isSkuVisible = true
			}
		},
		lingquBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
				'opmode','CLFB_lqbill',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				'jhrqid',this.editForm.jhrqid,
				])
				},'整件分拨领取任务',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
          _self.resetAll()
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.lingquData = rtn_json_obj
					console.log("得到领取任务")
					console.log(rtn_json_obj)
					_self.skuData = rtn_json_obj
					if(_self.skuData.length > 0){
						// _self.isSkuVisible = true
					}else{
						_self.$toast.fail('暂无获取商品详情')
					}
				}
			});
		},
    resetAll(){
      var _self = this;
      _self.editForm.jhrqid = ''  // 清空原容器号
      _self.editForm.jhrq = ''
      _self.editForm.pack = ''
      _self.editForm.qty = ''
      _self.editForm.unit = ''
      _self.editForm.itemid = ''
      _self.editForm.subid = ''
      _self.editForm.renwuid = ''
      _self.editForm.bill = ''
      _self.editForm.jh_totqty = ''
      _self.editForm.jhrqid = ''
      _self.editForm.mb_rqh = ''
      _self.skuData = [
        {
          storename:'',
          subsname:'',
          itemid:'',
          renwuid:'',
          jhrq:'',
          ck_storeid:'',
          pack:'',
          qty:'',
          unit:'',
          barcode:'',
          jh_totqty:'',
        }
      ]
      _self.index = 0
      _self.canSubmit = false
      if (_self.$refs.scanInput) {
        _self.$refs.scanInput.reset()
      }
    },
		selectSkuClick(row,i){
			this.index = i
			this.isSkuVisible = false
		},
		saveGoodsBtn(){
			 // console.log(this.lingquData[this.index])
			 if(this.lingquData[this.index] == undefined){
				 return alert('请先查询商品哦')
			 }else{
				 this.editForm.jhrq = this.lingquData[this.index].jhrq
				 this.editForm.pack = this.lingquData[this.index].pack
				 this.editForm.qty = this.lingquData[this.index].qty
				 this.editForm.unit = this.lingquData[this.index].unit
				 this.editForm.itemid = this.lingquData[this.index].itemid
				 this.editForm.subid = this.lingquData[this.index].subid
				 this.editForm.renwuid = this.lingquData[this.index].renwuid
				 this.editForm.bill = this.lingquData[this.index].bill
				 this.editForm.jh_totqty = this.lingquData[this.index].jh_totqty
				 this.editForm.ck_storeid = this.lingquData[this.index].ck_storeid
				 this.editForm.cwno  = this.lingquData[this.index].cwno
				 this.editForm.pswhsid  = this.lingquData[this.index].pswhsid
			 }

			console.log(this.editForm)
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_fenbo',
					'i':this.FNULLE([
					'opmode','CLFB_qritem',
					'kqid', _self.ryuser.kqid,
					'czyid',_self.ryuser.operatorid,
					'jhrq',_self.editForm.jhrq,
					'mb_rqh', _self.editForm.mb_rqh,
					'pack',_self.editForm.pack,
					'qty',_self.editForm.qty,
					'unit',_self.editForm.unit,
					'itemid',_self.editForm.itemid,
					'subid',_self.editForm.subid,
					'renwuid',_self.editForm.renwuid,
					'bill',_self.editForm.bill,
					'jh_totqty',_self.editForm.jh_totqty,
					'ck_storeid',_self.editForm.ck_storeid,
					'cwno',_self.editForm.cwno,
					'pswhsid',_self.editForm.pswhsid,
				])
				}, '拆零分拨提交',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					console.log('查询失败')
          console.log(ret_errmess)
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到拆零分拨提交")
					console.log(rtn_json_obj[0])
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast(rtn_json_obj[0].ret_mess)
					}else{
						_self.$toast(rtn_json_obj[0].ret_mess)
						_self.editForm.jhrq = ''
						_self.editForm.pack = ''
						_self.editForm.qty = ''
						_self.editForm.unit = ''
						_self.editForm.itemid = ''
						_self.editForm.subid = ''
						_self.editForm.renwuid = ''
						_self.editForm.bill = ''
						_self.editForm.jh_totqty = ''
						_self.editForm.jhrqid = ''
						_self.editForm.mb_rqh = ''
						_self.skuData = [{
                  storename:'',
                  storename:'',
                  storename:'',
                  subsname:'',
                  itemid:'',
                  renwuid:'',
                  jhrq:'',
                  ck_storeid:'',
                  pack:'',
                  qty:'',
                  unit:'',
                  barcode:'',
                  jh_totqty:'',
						}]
            _self.canSubmit = false
            if (_self.$refs.scanInput) {
              _self.$refs.scanInput.reset()
            }
					}
				}
			});
		},
    editBtnClick(){
      this.isdisabled = true
      this.addmode = true
    },
    saveBtnClick(){
      console.log(this.skuData[this.index].pack)
      console.log(this.skuData[this.index].qty)
      var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
          'opmode','CLFB_xgitem',
          'czyid',this.ryuser.operatorid,
          'kqid', this.ryuser.kqid,
          'jhrqid',this.editForm.jhrqid,
          'pack',this.skuData[this.index].pack,
          'qty',this.skuData[this.index].qty,
          'unit',this.skuData[this.index].unit,
          'itemid',this.skuData[this.index].itemid,
          'subid',this.skuData[this.index].subid,
          'renwuid',this.skuData[this.index].renwuid,
          'bill',this.skuData[this.index].bill,
          'jh_totqty',this.skuData[this.index].jh_totqty,
          'ck_storeid',this.skuData[this.index].ck_storeid,
          'cwno',this.skuData[this.index].cwno,
          'yj_totqty',this.skuData[this.index].yj_totqty,
          'pswhsid',this.skuData[this.index].pswhsid,
          'jhrqxg',this.skuData[this.index].jhrqxg,
				])
				},'拆零分拨修改任务',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail(ret_errmess)
					_self.$store.commit('hideLoading');
          _self.lingquBtn() //重新查询任务
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log(rtn_json_obj)
          _self.$toast(rtn_json_obj[0].ret_mess)
          if(rtn_json_obj[0].ret_ret == '-1'){
            _self.$alert(rtn_json_obj[0].ret_mess)
          }else{
            _self.$toast(rtn_json_obj[0].ret_mess)
            _self.isdisabled = false
            _self.addmode = false
            _self.canSubmit = false
            if (_self.$refs.scanInput) {
              _self.$refs.scanInput.reset()
            }
          }
				}
			});
    },
    fenbochaxun(){
      if(this.editForm.jhrqid == ''){
        this.$toast.fail('请填写原容器号')
      }else{
        this.$router.push({name:'fenbochaxun',query: {jhrqid:this.editForm.jhrqid}})
      }
    },
    _getjhrqList(){
      var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_fenbo',
					'i':this.FNULLE([
					'opmode','CLFB_W_qryjhrq',
					'kqid', this.ryuser.kqid,
					'czyid',this.ryuser.operatorid,
				])
				}, '拆零分拨查询原容器号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
          console.log('查询失败')
          console.log(ret_errmess)
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到拆零分拨查询原容器号")
					console.log(rtn_json_obj[0])
					if(rtn_json_obj.length > 0) {
						_self.jhrqList = rtn_json_obj
						_self.jhrqVisible = true
					} else {
						_self.$toast.fail('暂无未分拨容器')
					}
				}
			});
    },
    selectJhrqClick(row) {
			this.editForm.jhrqid = row.jhrq
			this.jhrqVisible = false
			this.lingquBtn()
		},
  },
  mounted() {
    // 确保组件完全挂载后再调用方法
    this.$nextTick(() => {
      if (this.$refs.scanInput) {
        this.$refs.scanInput.reset()
      }
    })
  },
	components: {
    ItemScanInput,
    TablePopup
	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}




</style>
